<template>
  <div class="dbContainer">
    <div class="headerBox">
      <h5>数据库信息</h5>
      <i class="el-icon-arrow-down h-icon h-row" :style="{transform:isMerged?'rotate(180deg)':'rotate(0)'}"
         @click="mergeTable"></i>
      <i class="el-icon-close h-icon h-close" @click="closeAll"></i>
    </div>
    <div class="tableContainer"
         :style="[{opacity:isMerged?'0':'1'},{height:isMerged?'0':'550px'},{marginTop:isMerged?'0':'15px'}]">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="编号"
            min-width="50">
        </el-table-column>
        <el-table-column
            prop="url"
            label="文件路径"
            min-width="400">
        </el-table-column>
        <el-table-column
            prop="date"
            label="备份时间">
        </el-table-column>
      </el-table>
      <el-button class="form-btn" @click="getDbData">备份数据库</el-button>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: "Database",
  data() {
    return {
      isClose: false,
      isMerged: false,
      tableData: []
    }
  },
  methods: {
    //判断更换收缩图标
    changeStatus() {
      this.isMerged = !this.isMerged
    },
    //收缩表格
    mergeTable() {
      this.changeStatus()
    },
    //关闭
    closeAll() {
      this.isClose = !this.isClose
    },
    //获取值
    async getDbData() {
      await this.$axios({
        method: 'POST',
        url: '/mysql/showSql',
        params: {
          limit: 10,
          page: 1
        }
      }).then(res => {
        let response = res.data.data
        for (let i = 0; i < response.length; i++) {
          let time = moment().format('YYYY-MM-DD hh:mm')
          response[i] = {...response[i], date: time}
        }
        this.tableData = response
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.dbContainer {
  width: 98%;
  height: 100%;
  margin: 20px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.headerBox {
  width: 100%;
  height: 40px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #cfd1d2;
  background-color: #fff;
}

.tableContainer {
  width: 96%;
  margin: 15px auto;
  transition: all .5s linear;
}

.h-icon {
  position: absolute;
  color: #cfd1d2;
  font-weight: bold;
}

.h-row {
  right: 55px;
  transition: all .3s linear;
}

.h-close {
  right: 25px;
}

.form-btn {
  margin-top: 20px;
  background-color: #1ab394;
  border-color: #1ab394;
  color: #FFF;
}
</style>